<template>
  <u-modal :show="showModal" title="选择-翻改人" @cancel="onCloseOfSelectEmpModel" @confirm="onConfirmOfSelectEmpModel" :showCancelButton="true">
    <view class="slot-content width-100-percentage">
      <view class="margin-bottom-20">
        <u-search v-model="searchParams.name" shape="square" placeholder="名称" @clear="onSearchBtn('')" @search="onSearchBtn" @custom="onSearchBtn"></u-search>
      </view>
      <jk-table
          :height="400"
          :stripe="false"
          :table-header="tableHeader"
          :table-data="tableData"
          @row="onRow"
      ></jk-table>

      <view class="margin-top-10">
        <jkPage
            :page-index="searchParams.pageNo"
            :page-size="searchParams.pageSize"
            :total-count="searchParams.totalCount"
            @page="onPageChange"
        ></jkPage>
      </view>
    </view>
  </u-modal>
</template>

<script>
  import {pageConfig, tipBar, showLoading} from "../../../../utils/jk-utils";
  import {empList} from "../../../../api";
  import jkPage from '../../../../jk-components/jk-page';
  import jkTable from '../../../../jk-components/jk-table';

  export default {
    components: { jkPage, jkTable },
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      workshopId: {
        type: Number,
        default: null,
      }
    },
    data() {
      return {
        showLoading: false,
        tableHeader: [
          { title: '名称', key: 'name' },
          { title: '编号', key: 'code' },
          { title: '车间', key: 'workshopName' },
          { title: '工序', key: 'processName' },
          { title: '部门', key: 'deptName' },
        ],
        selectedEmpItem: {},
        tableData: [],
        searchParams: {
          name: '',
          onJob: true,
          pageIndex: 1,
          pageSize: pageConfig.pageSize,
          totalCount: pageConfig.totalCount,
        },
        showModal: false
      };
    },
    methods: {
      onRow(e) {
        this.selectedEmpItem = e;
      },
      onSearchBtn(e) {
        this.selectedEmpItem = {};
        this.$set(this.searchParams, 'name', e);
        this.$set(this.searchParams, 'pageIndex', 1);
        this.getListRequest();
      },
      getListRequest() {
        showLoading(true);
        return empList({
          ...this.searchParams,
          workshopId: this.workshopId
        }).then(res => {
          showLoading(false);
          if (res.data.status === 200) {
            this.tableData = res.data.res;
            this.$set(this.searchParams, 'totalCount', res.data.count);
          }
        });
      },
      onCloseOfSelectEmpModel() {
        this.$emit('close');
        this.$set(this.searchParams, 'pageIndex', 1);
        this.$set(this.searchParams, 'name', '');
        this.tableData = [];
      },
      onConfirmOfSelectEmpModel() {
        if (Object.keys(this.selectedEmpItem).length) {
          this.$emit('confirm', JSON.parse(JSON.stringify(this.selectedEmpItem)));
          this.$set(this.searchParams, 'pageIndex', 1);
          this.$set(this.searchParams, 'name', '');
          this.tableData = [];
        } else {
          tipBar('none');
        }
      },
      onPageChange(e) {
        this.selectedEmpItem = {};
        this.$set(this.searchParams, 'pageIndex', e);
        this.getListRequest();
      },
    },
    watch: {
      show(newVal) {
        this.showModal = newVal;
        if (newVal) {
          this.getListRequest();
        }
      }
    }
  }
</script>
